<template>
    <div>
        <el-table
                @selection-change="handleSelectionChange"
                border
                size="mini"
                @sort-change="sortChange"
                :data="tableData"
                max-height="650px"
                style="width: 100%">
            <slot></slot>
        </el-table>
        <el-pagination
                v-if="pageParam"
                @current-change="functionQuery"
                @size-change="functionQuery"
                :current-page.sync="pageParam.current"
                :page-sizes="[20, 100]"
                :page-size.sync="pageParam.fetch"
                layout="total, sizes, prev, pager, next"
                :total="pageTotal">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "base-page-table",
        props: {
            tableData: {
                required: true
            },
            functionQuery: {
                required: true
            },
            pageParam: {
                required: false
            },
            sortChange: {
                required: false,
                default: Function
            },
            pageTotal: {
                required: false
            },
            selectedValues: {
                required: false,
                default: null
            },
            selectedPropertyName: {
                required: false,
                default: "id"
            }
        },
        methods: {
            handleSelectionChange(selection) {
                this.$emit("selection-change", selection);
                if (this.selectedValues) {
                    this.selectedValues.length = 0;
                    selection.forEach(item => {
                        this.selectedValues.push(item[this.selectedPropertyName]);
                    });
                }
            },
            sort(){}
        }
    }
</script>

<style scoped>

</style>